<template>
  <div class="comment-dialog">
    <uni-popup ref="popup" :is-mask-click="false" background-color="transparent" @change="change">
      <div class="main-content">
        <div>
          <div class="title-content">
            <h2>请对人员服务整体作出评价</h2>
            <uni-icons class="close" type="closeempty" size="20" color="#333333" @click="close" />
          </div>
          <div class="form-content">
            <ul>
              <li :class="{ active: currentPoint && currentPoint.code === point.code }" v-for="(point, index) in pointList" :key="index">
                <div @click="selectPoint(point, index)">
                  <div class="img">
                    <img mode="widthFix" class="icon" :src="point.icon" alt="">
                    <img mode="widthFix" class="icon-active" :src="point.activeIcon" alt="">
                    <!--<div class="icon" :style="{ 'background-image': 'url(' + point.icon + ')' }" />-->
                    <!--<div class="icon-active" :style="{ 'background-image': 'url(' + point.activeIcon + ')' }" />-->
                  </div>
                  <div class="value"><p v-text="point.name" /></div>
                </div>
                <div class="horn" v-if="currentPoint && currentPoint.children" />
              </li>
            </ul>
            <template v-if="currentPoint && currentPoint.children">
              <div class="reason-content">
                <EasyRadio :dataList="reasonList" :activeValue="reasonCode" @change="reasonChange" />
                <div class="reason-input">
                  <uni-easyinput v-if="['3', '13'].includes(reasonCode)" type="textarea" :maxlength="100" v-model="reason" placeholder="请输入内容" />
                </div>
              </div>
              <!--<div class="test">-->
              <!--<img mode="widthFix" src="../../static/images/example/test.png" />-->
              <!--</div>-->
            </template>
          </div>
          <div class="btn-content">
            <!--<button type="primary" :disabled="!ableSubmit" :class="{ disable: !ableSubmit }" @click="submit">确定</button>-->
            <button type="primary" :disabled="!currentPoint" :class="{ disable: !currentPoint }" @click="submit">确定</button>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
  import EasyRadio from '../common/EasyRadio';
  import { getAppData } from '../../utils/init';
  import { isEmpty, toast } from '../../utils/common';
  
  export default {
    name: 'CommentDialog',
    components: {
      EasyRadio,
    },
    props: {
      deptId: {
        type: [ String, Number ],
        default: '',
      },
      staffInfo: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    data() {
      // {
      //   评议结果，1-满意，2-较满意，3-基本满意，4-不满意，5-不了解情况
      //   基本满意【1服务意识差，2工作效率低，3其他】
      //  不满意【11办事推拖绕，12吃拿卡要，13其他】
      // }
      return {
        pointList: [
          // {
          //   name: '不了解情况', code: '5', value: '5', icon: require('../../static/images/comment-point/buliaojie.png'), activeIcon: require('../../static/images/comment-point/buliaojie-active.png'),
          // },
          {
            name: '不满意', code: '4', value: '4', icon: require('../../static/images/comment-point/bumanyi.png'), activeIcon: require('../../static/images/comment-point/bumanyi-active.png'), children: [
              { name: '办事推托绕', code: '11', value: '11' },
              { name: '吃拿卡要', code: '12', value: '12' },
              { name: '其他', code: 'other', value: '13' },
            ],
          },
          // {
          //   name: '基本满意', code: '3', value: '3', icon: require('../../static/images/comment-point/jibenmanyi.png'), activeIcon: require('../../static/images/comment-point/jibenmanyi-active.png'), children: [
          //     { name: '服务意识差', code: '1', value: '1' },
          //     { name: '工作效率低', code: '2', value: '2' },
          //     { name: '其他', code: 'other', value: '3' },
          //   ],
          // },
          // {
          //   name: '较满意', code: '2', value: '2', icon: require('../../static/images/comment-point/jiaomanyi.png'), activeIcon: require('../../static/images/comment-point/jiaomanyi-active.png'),
          // },
          {
            name: '满意', code: '1', value: '1', icon: require('../../static/images/comment-point/henmanyi.png'), activeIcon: require('../../static/images/comment-point/henmanyi-active.png'),
          },
        ],
        activeIndex: null,
        reason: '',
        reasonCode: '',
      };
    },
    computed: {
      currentPoint() {
        if (this.activeIndex || this.activeIndex === 0) {
          return this.pointList[ this.activeIndex ];
        }
        return null;
      },
      reasonList() {
        const { currentPoint } = this;
        let dataList = [];
        if (currentPoint && currentPoint.children) {
          dataList = currentPoint.children.map((val) => {
            return {
              name: val.name,
              value: val.value,
            };
          });
        }
        return dataList;
      },
    },
    watch: {},
    mounted() {
      this.$nextTick(() => {
        this.popupShow(true);
      });
    },
    created() {
    },
    methods: {
      close() {
        this.popupShow(false);
      },
      popupShow(isShow) {
        const popup = this.$refs.popup[ 0 ] || this.$refs.popup;
        if (isShow) {
          popup.open('center');
          return;
        }
        popup.close();
      },
      selectPoint(point, index) {
        this.reasonCode = '';
        this.reason = '';
        if (index === this.activeIndex) {
          this.activeIndex = null;
          return;
        }
        this.activeIndex = index;
      },
      reasonChange({ data }) {
        this.reasonCode = data.value;
      },
      async submit() {
        const appData = getAppData();
        const { userInfo } = appData;
        const { staffInfo, deptId, currentPoint, reasonCode, reason } = this;
        if ([ '3', '13' ].includes(reasonCode) && isEmpty(reason)) {
          toast('请填写内容');
          return;
        }
        const param = {
          goveId: staffInfo.goveId,
          districtTo: staffInfo.goveCountyId,
          districtNameTo: staffInfo.goveCountyName,
          organIdTo: deptId,
          commentPersonId: userInfo.personId,
          // districtFrom: userInfo.organId,
          // districtNameFrom: userInfo.organName,
          comment: currentPoint.value,
          commentSub: reasonCode,
          commentOtherContent: reason,
        };
        this.$emit('submit', { param });
        this.close();
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close');
          }, 500);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .comment-dialog {
    .main-content {
      padding: 0 10px;
      width: 100vw;
      display: flex;
      max-height: 80vh;
      flex-direction: column;
      overflow: hidden;
      > div {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        .title-content {
          position: relative;
          margin: 0 -20px;
          h2 {
            font-weight: 600;
            font-size: 18px;
            line-height: 1;
            text-align: center;
            color: #0669f0;
            padding: 0 30px;
          }
          .close {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .form-content {
          flex: 1;
          padding: 20px 0;
          ul {
            font-size: 0;
            margin: 0 -5px;
            text-align: center;
            li {
              position: relative;
              display: inline-block;
              width: 20%;
              > div {
                .img {
                  margin: 0 10px;
                  position: relative;
                  img {
                    display: block;
                    position: absolute;
                    opacity: 0;
                    /*background-size: cover;*/
                    /*background-position: center;*/
                    /*height: calc(((100vw - 50px) / 5) - 10px);*/
                    width: 100%;
                    &.icon {
                      position: relative;
                      opacity: 1;
                    }
                  }
                }
                .value {
                  margin-top: 10px;
                  p {
                    font-size: 12px;
                    line-height: 1;
                    text-align: center;
                    white-space: nowrap;
                  }
                }
              }
              .horn {
                display: none;
                position: absolute;
                bottom: -30px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-bottom-color: #f1f7fc;
              }
              &.active {
                > div {
                  .img {
                    img {
                      &.icon {
                        position: absolute;
                        opacity: 0;
                      }
                      &.icon-active {
                        position: relative;
                        opacity: 1;
                      }
                    }
                  }
                }
                .horn {
                  display: block;
                }
              }
            }
          }
          .reason-content {
            padding: 10px;
            background-color: #f1f7fc;
            margin-top: 30px;
            .reason-input {
              margin-top: 15px;
            }
          }
          .test {
            padding: 15px 0;
            img {
              display: block;
              width: 100%;
            }
          }
        }
        .btn-content {
          padding: 10px 20px 0;
          button {
            border-radius: 10px;
            background-color: #0669f0;
            transition: all 0.2s;
            &.disable {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
</style>
